<template>
<!-- 以评价页面 -->
  <div>
    <div class="box111">
      <ul class="myul">
        <li><van-icon name="arrow-left" /></li>
        <li>快递单评价</li>
        <li>提交</li>
      </ul>
    </div>
    <ul class="app">
      <li>总体评分</li>
      <li>{{value}}分</li>
      <li>
        <van-rate
          gutter="35px"
          :size="40"
          v-model="value"
          icon="like"
          void-icon="like-o"
        />
      </li>
    </ul>
    <h3>店铺评分</h3>
    <ul class="app-3">
      <li>
        <span>店铺评分</span>
        <van-rate
          v-model="value1"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
      <li>
       
        <span>物流速度</span>
        <van-rate
          v-model="value2"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
      <li>
        <span>快递评分</span>
        <van-rate
          v-model="value3"
          :size="25"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
        />
      </li>
    </ul>
    <input class="get" type="textarea" :placeholder="info" >
    <van-uploader v-model="fileList" multiple />
  </div>



  <!-- 
data: {id: "1354615678955773957", orderCode: "1354615678754447601", consignor: "郎柏", consignee: "大宝剑",…}
belongUser: "1354275382904549377"
consignee: "大宝剑"
consignor: "郎柏"
createTime: "2021-01-28 10:22:00"
express: 3
id: "1354615678955773957"
images: []
imgs: ["https://wx3.sinaimg.cn/large/0071noTCgy1gj9m2ov2tuj30g00shn26.jpg",…]
info: "写几句评论"
logistics: 3
orderCode: "1354615678754447601"
shop: 3
star: 1
starTime: "2021-02-05 17:19:12"
state: 0
totalScore: 3
   -->
</template>

<script>
import {staridData} from '../request/api'
export default {
  data() {
    return {
      value: 1,
      value1: 1,
      value2: 1,
      value3:1,
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        
      ],
      id:this.$route.query.id,
      totalScore:'',
      info:""
    };
    
  },
  created(){
    console.log(this.id);
    staridData(
      {id:this.id}
    ).then(res=>{
      console.log(res);
      let {totalScore,express,logistics,shop,info}=res.data
      this.value=totalScore
      this.value3=express
      this.value2=logistics
      this.value1=shop
      this.info=info
    })
  }
};
</script>

<style lang = "less" scoped>
.box111 {
  height: 60px;
  background-color: blue;
  line-height: 60px;
  .myul {
    display: flex;
    justify-content: space-around;
    img {
      width: 25px;
      height: 25px;
      margin-top: 15px;
    }
  }
}
.app {
  text-align: center;
  border-bottom: 1px solid #ccc;
  li {
    line-height: 40px;
    font-size: 20px;
  }
}
h3 {
  margin-left: 20px;
  color: #0f0f0f;
}
.app-3 {
  li {
    margin: 0 50px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top:20px ;
    border-top: 1px solid #ccc;
    
  }
}
.get{
  margin-top: 20px;
  width: 405px;
  height: 200px;
  border: none;
}
</style>